<template>
	<view>
		<custom-header title="操作日志" />
		<view class="search_wrap">
			<view class="selectTime" @click="isShowDatetimePicker = true">
				<view class="icon">
					<image src="/static/common/date_icon.png" mode=""></image>
				</view>
				<view class="date">{{ selectDateTime || '本月' }}</view>
				<view class="bottom_icon">
					<image src="/static/common/bottom1.png" mode=""></image>
				</view>
			</view>
		</view>
		<view
			class="no_data" 
			:style="{height:'calc(100vh - 300rpx - '+statusBarHeight+'px)'}"
			v-if="!listData.length && listLoading != 'loading'">
			<view class="nd_wrap">
				<view class="icon">
					<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
				</view>
			</view>
		</view>
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 90rpx -  '+statusBarHeight+'px)'}"
			class="scroll_content_wrap"
			v-if="listData.length">
				<view class="list_wrap">
					<view 
					class="list"
					v-for="(item,index) in listData" 
					:key="index">
						<view class="name_operation_conent">
							<view class="name">
								<text>{{ item.productName+item.gradeName }}</text>
								<text class="za">{{item.beforeContent}}→{{item.afterContent}}</text>
							</view>
							<view class="operation_conent">
								{{item.operateType}}
							</view>
						</view>
						<view class="time_user">
							<view class="time">时间：{{item.operateTime}}</view>
							<view class="user">操作：{{item.operateBy}}</view>
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="loading_wrap" v-if="listLoading == 'loading'">
			<up-loadmore
				:status="listLoading"
				iconSize="22"
				iconColor="#FF3316"
				loadingIcon='semicircle'
				loadingText=""
				/>
		</view>
		<!-- 选择时间 -->
		<custom-select-time 
			:show="isShowDatetimePicker" 
			:defaultDate="selectDateTime"
			@close="isShowDatetimePicker = false" 
			@confirm="handleSelectTime">
		</custom-select-time>
	</view>
</template>

<script setup>
	import { computed, ref, onMounted } from 'vue'
	import { useStore } from 'vuex';
	import goodsApi from '@/api/goods'
	import { getTodayRange, parseTimeSelection } from '@/utils/dateUtils'

	const store = useStore()
	
	const params = {
		pageNo: 1,
		pageSize: 20,
		startTime: '',
		endTime: ''
	}

	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);

	// 获取操作日志分页列表
	const loadGetListData = async () => {
		try {
			listData.value = []
			listLoading.value = 'loading'

			let timeRange
			if (selectDateTime.value) {
				const { timeRange: selectedRange } = parseTimeSelection(selectDateTime.value)
				timeRange = selectedRange
			} else {
				// 默认当天时间范围
				timeRange = getTodayRange()
			}

			const requestParams = {
				...params,
				startTime: timeRange.startTime,
				endTime: timeRange.endTime
			}

			// 调用api
			const response = await goodsApi.getGoodsLogPageList(requestParams)

			if (response && response.records) {
				listData.value = response.records

				if (response.records.length < requestParams.pageSize) {
					listLoading.value = 'nomore'  
				} else {
					listLoading.value = 'loadmore'  
				}
			} else {
				listData.value = []
				listLoading.value = 'nomore'
			}

		} catch (error) {
			console.error('获取操作日志失败:', error)
			listData.value = []
			listLoading.value = 'loadmore'

			uni.showToast({
				title: '获取操作日志失败',
				icon: 'none'
			})
		}
	};
	
	// 选择日期
	const isShowDatetimePicker = ref(false);
	const selectDateTime = ref('');
	const handleSelectTime = (e)=>{
		selectDateTime.value = e;
		loadGetListData();
	};
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	.search_wrap{
		height: 83rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		.selectTime{
			display: flex;
			align-items: center;
			.icon{
				width: 28rpx;
				height: 27rpx;
				display: flex;
			}
			.date{
				padding: 0 10rpx;
			}
			.bottom_icon{
				width: 20rpx;
				height: 11rpx;
				display: flex;
			}
		}
	}
	.no_data{
		display: flex;
		justify-content: center;
		align-items: center;
		.nd_wrap{
			width: max-content;
			.icon{
				width:280rpx;
				height: 322rpx;
			}
		}
	}
	.list_wrap{
		padding: 20rpx;
		.list{
			padding: 20rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			.name_operation_conent,.time_user{
				display: flex;
				justify-content: space-between;
			}
			.name_operation_conent{
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				.za{
					padding-left: 15rpx;
					color: #5786FF;
				}
			}
			.time_user{
				font-size: 24rpx;
				color: #999;
				padding-top: 30rpx;
			}
		}
	}
</style>
